<template>
  <cv-header aria-label="Carbon header">
      <cv-header-menu-button aria-label="Header menu" aria-controls="side-nav" />
      <cv-skip-to-content href="#main-content"
        >Skip to content</cv-skip-to-content
      >
      <cv-header-name to="/" prefix=""><img :src="publicPath+'favicon.ico'" style="width:1.5rem;height:1.5rem;"/>IBM Carbon Tutorial</cv-header-name>
      <cv-header-nav aria-label="Carbon nav">
        <cv-header-menu-item to="/repos">Repositories</cv-header-menu-item>
      </cv-header-nav>

    <template slot="left-panels" v-if="showLeftPanels">          
    <cv-side-nav id="side-nav" rail>
        <cv-side-nav-items>
          <cv-side-nav-menu title="L1 menu">
            <template slot="nav-icon"><fade-16 /></template>
            <cv-side-nav-menu-item href="javascript:;" active>
              L2 menu item
            </cv-side-nav-menu-item>
            <cv-side-nav-menu-item href="javascript:;">
              L2 menu item
            </cv-side-nav-menu-item>
            <cv-side-nav-menu-item href="javascript:;">
              L2 menu item
            </cv-side-nav-menu-item>
          </cv-side-nav-menu>
          <cv-side-nav-menu title="L1 menu">
            <template slot="nav-icon"><fade-16 /></template>
            <cv-side-nav-menu-item href="javascript:;">
              L2 menu item
            </cv-side-nav-menu-item>
            <cv-side-nav-menu-item href="javascript:;" aria-current="page">
              L2 menu item
            </cv-side-nav-menu-item>
            <cv-side-nav-menu-item href="javascript:;">
              L2 menu item
            </cv-side-nav-menu-item>
          </cv-side-nav-menu>
          <cv-side-nav-link href="javascript:;">
            <template slot="nav-icon"><fade-16 /></template>
            L1 link
          </cv-side-nav-link>
          <cv-side-nav-link href="javascript:;">
            <template slot="nav-icon"><fade-16 /></template>
            L1 link
          </cv-side-nav-link>
        </cv-side-nav-items>
      </cv-side-nav>
    </template>

    <template slot="right-panels" v-if="showRightPanels">   
      <cv-header-panel  id="user-panel" style="height:5rem;">
        <cv-switcher>
          <cv-switcher-item>
            <cv-switcher-item-link href="javascript:;" @click="clickMenu('user-link1')">
              收藏的Repo
            </cv-switcher-item-link>
          </cv-switcher-item>
          <cv-switcher-item>
            <cv-switcher-item-link href="javascript:;" @click="clickMenu('user-link2')">
              Link2             
            </cv-switcher-item-link>              
          </cv-switcher-item>
        </cv-switcher>               
      </cv-header-panel>          
      <cv-header-panel  id="notifications-panel" style="height:5rem;">
          Message
      </cv-header-panel>
      <cv-header-panel id="switcher-panel" style="height:5rem;">
        <cv-switcher>
          <cv-switcher-item>
            <cv-switcher-item-link href="javascript:;" @click="clickMenu('switcher-link1')">
              link1           
            </cv-switcher-item-link>              
          </cv-switcher-item>
        </cv-switcher> 
      </cv-header-panel>
    </template>

    <template slot="header-global" v-if="showGlobalPanels">  
      <cv-header-nav aria-label="Carbon nav">
        <cv-header-menu-item href="javascript:;" @click="clickMenu('global-test1')">Test1</cv-header-menu-item> 
        <cv-header-menu-item href="javascript:;" @click="clickMenu('global-test2')">Test2</cv-header-menu-item>
        <cv-header-menu-item href="javascript:;" @click="clickMenu('global-test3')">Test3</cv-header-menu-item>
        <cv-header-menu aria-label="Link 4" title="MenuGroup">
          <cv-header-menu-item href="javascript:;" @click="clickMenu('global-menuitem1')">
            Menuitem1
          </cv-header-menu-item>
          <cv-header-menu-item href="javascript:;" @click="clickMenu('global-menuitem2')">
            Menuitem2
          </cv-header-menu-item>
        </cv-header-menu>                   
      </cv-header-nav>             
      <cv-header-global-action
        aria-label="Notifications"
        aria-controls="notifications-panel"
        >
        <Notification20 />
      </cv-header-global-action>
      <cv-header-global-action aria-label="User avatar" 
        aria-controls="user-panel">
        <UserAvatar20 />        
      </cv-header-global-action>
      <cv-header-global-action
        aria-label="App switcher"
        aria-controls="switcher-panel"
        >
        <AppSwitcher20 />
      </cv-header-global-action>
    </template>
  </cv-header>

</template>

<script>
import Notification20 from "@carbon/icons-vue/es/notification/20";
import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
import AppSwitcher20 from "@carbon/icons-vue/es/app-switcher/20";
import Fade16 from "@carbon/icons-vue/es/fade/16";
import Logout16 from "@carbon/icons-vue/es/logout/16";
import Settings16 from "@carbon/icons-vue/es/settings/16";

export default {
  name: "TutorialHeader",
  components: { Notification20, UserAvatar20, AppSwitcher20,Fade16,Logout16,Settings16 },
  props: {
    showLeftPanels: Boolean,
    showRightPanels: Boolean,
    showGlobalPanels: Boolean,
  },
  methods:{
    clickMenu(menuName){
      console.log("clickMenu:",name);
        //this.$router.push({ path: '/test',query: { id: 100}});// /test?id=100
        //this.$router.push({ name:'/test',  params:{id:menuId} });// /test/100/
        // this.$router.push({ path:'/test/'+menuName}); 
        if(menuName==="global-test1"){  
          this.$router.push({ path:'/test/'+menuName,query: { id:100}});
        }else if(menuName==="global-test2"){  
          this.$router.push({ name:menuName,  params:{id:100} });
        }else{
          this.$router.push({ path:'/test/'+menuName});
        }   
    },    
  }, 
};
</script>
